<template>
  <div class="wrap">
    <div class="wrap-top">
      <div class="wrap-top-box">
        <div class="top-img">
          <img src="/static/imgs_s03/s03_sliver.png" alt />
        </div>
        <div class="top-f">
          <div class="top-lef">
            <p>累计积分：</p>
            <p>我的生日：</p>
          </div>
          <div class="top-r">
            <p>25800</p>
            <P>1995-12-5</P>
          </div>
        </div>
        <ul>
          <li class="top-a1"></li>
          <li class="top-a2"></li>
          <li class="top-a3">680/2000</li>
          <li class="top-a4">升级</li>
        </ul>
        <p class="jiuyan">久颜</p>
        <span class="top-zuan">银牌会员</span>
        <div class="top-pic">
          <img src="/static/imgs_s03/s03_ppic.png" alt />
        </div>
      </div>
    </div>
    <div class="wrap-nav">
      <div class="nav-box">
        <div class="nav-shoucang">
          <div class="my">
            <p>158</p>
            <p>我的收藏</p>
          </div>
          <div class="one">
            <p>1</p>
            <p>兑换券</p>
          </div>
          <div class="lipin">
            <p>16</p>
            <p>礼品卡</p>
          </div>
          <div class="jifen">
            <p>2580</p>
            <p>可用积分</p>
          </div>
        </div>
      </div>
    </div>

    <div class="wrap-mymony">
      <div class="mymony-box">
        <div class="mym-lrf">
          <div class="mym-l">
            <p class="m1">我的余额</p>
            <p class="m2">￥168.00</p>
          </div>
          <p class="liji">立即充值</p>
        </div>
      </div>
    </div>
    <div class="wrap-free">
      <div class="free-box">
        <div class="free-f">
          <div class="f-lef">
            <div class="lef-img">
              <img src="/static/imgs_s03/s03_apple .png" alt />
            </div>
            <span class="er">0</span>
            <span class="yuan">元</span>
            <span class="l1">领水果</span>
            <p>
              <span class="o1">水果免费</span>
              <span class="o2">更享包邮</span>
              <span class="o3">></span>
            </p>
          </div>
          <div class="tree-r">
            <img src="/static/imgs_s03/s03_tree.png" alt />
          </div>
        </div>
      </div>
    </div>
    <div class="wrap-botton">
      <div class="botton-box">
        <h1>更多服务</h1>
        <div class="botton-top">
          <div class="bot-top-a">
            <div class="bot-im">
              <img src="/static/imgs_s03/s03_integral.png" alt />
            </div>
            <p>积分商城</p>
          </div>
          <div class="bot-top-a">
            <div class="bot-im">
              <img src="/static/imgs_s03/s03_gift.png" alt />
            </div>
            <p>礼品卡</p>
          </div>
          <div class="bot-top-a">
            <div class="bot-im">
              <img src="/static/imgs_s03/s03_min.png" alt />
            </div>
            <p>消息通知</p>
          </div>
          <div class="bot-top-a">
            <div class="bot-im">
              <img src="/static/imgs_s03/s03_mony.png" alt />
            </div>
            <p>资金明细</p>
          </div>
        </div>
        <div class="botton-top">
          <div class="bot-top-a">
            <div class="bot-im">
              <img src="/static/imgs_s03/s03_evluaate.png" alt />
            </div>
            <p>我的评价</p>
          </div>
          <div class="bot-top-a">
            <div class="bot-im">
              <img src="/static/imgs_s03/s03_dressw.png" alt />
            </div>
            <p>地址管理</p>
          </div>
          <div class="bot-top-a">
            <div class="bot-im">
              <img src="/static/imgs_s03/s03_caker.png" alt />
            </div>
            <p>我的生日</p>
          </div>
          <div class="bot-top-a">
            <div class="bot-im">
              <img src="/static/imgs_s03/s03_pencil.png" alt />
            </div>
            <p>意见反馈</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {},

  created() {
    // let app = getApp()
  }
};
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 100%;
  background-color: #eee;
}

.wrap-top {
  width: 100%;
  background-color: #fff;
}

.wrap-top-box {
  width: 375px;
  height: 177px;
  margin: 0 auto;
  position: relative;
}

.top-img img {
  width: 338px;
  height: 163px;
}

.top-f p {
  font-size: 12px;
  font-weight: 400;
  color: rgba(98, 118, 150, 1);
  line-height: 18px;
}

.top-f {
  display: flex;
  position: absolute;
  top: 83px;
  left: 40px;
}

.top-a1 {
  width: 48px;
  height: 6px;
  background: rgba(112, 133, 165, 1);
  border-radius: 3px;
}

.top-a2 {
  width: 100px;
  height: 6px;
  background: rgba(255, 255, 255, 1);
  border-radius: 3px;
}

.top-a3 {
  font-size: 11px;
  font-weight: 500;
  color: rgba(98, 118, 150, 1);
}

.wrap-top-box ul {
  display: flex;
  position: absolute;
  top: 135px;
  left: 40px;
}

.top-img {
  text-align: center;
}

.top-a4 {
  background: rgba(112, 133, 165, 1);
  border-radius: 5px;
  font-size: 7px;
  line-height: 10px;
  color: #fff;
  padding: 0px 8px;
}

.jiuyan {
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  position: absolute;
  top: 20px;
  left: 100px;
}

.top-zuan {
  font-size: 11px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 22px;
  opacity: 0.8;
  padding: 2px 10px;
  background: rgba(112, 133, 165, 1);
  border-radius: 9px;
  position: absolute;
  top: 44px;
  left: 100px;
}

.top-pic img {
  width: 54px;
  height: 54px;
}

.top-pic {
  position: absolute;
  top: 16px;
  left: 38px;
}

.wrap-nav {
  width: 100%;
  background-color: #fff;
}

.nav-box {
  width: 375px;
  margin: 0 auto;
}

.nav-shoucang p:nth-child(2n-1) {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
}

.nav-shoucang p:nth-child(2n) {
  font-size: 11px;
  color: #000;
  margin-left: 46px;
}

.nav-shoucang {
  display: flex;
}

.nav-shoucang p {
  margin-left: 49px;
}

.nav-shoucang p {
  line-height: 20px;
}

.wrap-mymony {
  width: 100%;
  background-color: #fff;
}

.mymony-box {
  width: 375px;
  margin: 0 auto;
  overflow: hidden;
}

.m1 {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.m2 {
  font-size: 22px;
  font-weight: bold;
}

.liji {
  font-size: 13px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  border-radius: 15px;
  border: 1px solid #eee;
  padding: 6px 9px;
  margin-left: 146px;
  float: left;
  margin-top: 59px;
}

.mym-l {
  float: left;
  line-height: 40px;
  margin-top: 19px;
  margin-left: 45px;
}

.wrap-free {
  width: 100%;
  background-color: #fff;
  margin-top: 10px;
}

.free-box {
  width: 375px;
  margin: 0 auto;
}

.lef-img img {
  width: 30px;
  height: 10px;
}

.tree-r img {
  width: 80px;
  height: 60px;
}

.er {
  font-size: 22px;
  font-weight: 500;
  color: #f00;
}

.yuan {
  font-size: 18px;
  color: #f00;
}

.l1 {
  font-size: 16px;
}

.o1 {
  color: rgb(148, 148, 148);
}

.o2 {
  color: rgb(148, 148, 148);
}

.o3 {
  background-color: rgb(239, 174, 65);
  color: #fff;
  font-size: 6px;
  border-radius: 100%;
  padding: 3px 6px;
}

.free-f {
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
}

.tree-r {
  margin-left: 100px;
}

.f-lef {
  margin-left: 51px;
}
.wrap-botton {
  width: 100%;
  background-color: #fff;
}
.botton-box {
  width: 375px;
  margin: 0 auto;
}
.bot-im img {
  width: 30px;
  height: 30px;
}
.botton-top {
  display: flex;
}
.bot-top-a {
  margin-left: 40px;
  line-height: 21px;
  margin-top: 50px;
  text-align: center;
}
.bot-top-a p {
  font-size: 12px;
}
h1 {
  font-size: 14px;
  padding-top: 30px;
  margin-left: 51px;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}
</style>
